<template>
    <div class="contribute">
        <div class="header el-icon-video-camera">我的投稿</div>
        <el-divider></el-divider>
        <div class="main">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="视频名称">
                    <el-input v-model="form.name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="视频简介">
                    <el-input type="textarea" v-model="form.introduction" resize="none"></el-input>
                </el-form-item>
                <el-form-item label="视频类型">
                    <el-select v-model="form.classification" placeholder="请选择"> 
                    <el-option v-for="item in classification" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传封面" >
                    <div>
                        <el-upload
                            class="upload-demo"
                            drag
                            action="http://lihouhang.oss-cn-beijing.aliyuncs.com"
                            :data="dataObj"
                            :file-list="filelist1"
                            :before-upload="BeforeUpload1"
                            :on-error="OnError"
                            accept=".jpg,.png"
                            :on-success="OnSuccess1"
                            >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>,只能上传jpg/png文件,且不超过500kb</div>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="上传视频">
                    <div>
                        <el-upload
                            class="upload-demo"
                            drag
                            action="http://lihouhang.oss-cn-beijing.aliyuncs.com"
                            :data="dataObj"
                            accept=".mp4"
                            :before-upload="BeforeUpload2"
                            :file-list="filelist2"
                            :on-success="OnSuccess2"
                            >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>,只能上传mp4文件</div>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item style="text-align: center;margin-bottom:100px;margin-right: 60px;">
                    <el-button type="primary" @click="Submit">提交</el-button>
                </el-form-item>  
            </el-form>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
import { v4 as uuidv4 } from 'uuid';
export default {
    data(){
        return{
            form:{//要上传的表单
                cover:"",
                resource:""
            },
            classification:[//分类
                
            ],
            filelist1:[//头像文件

            ],
            filelist2:[//视频文件

            ],
            dataObj:{//文件上传时的参数
                // policy:"",
                // signature:"",
                // OSSAccessKeyId:"",
                // success_action_status : '200',    
                // key:"",
                // dir:"",
                // host:""
            }
        }
    },
    methods:{
        //文件上传失败
        OnError(){
            console.log(this.dataObj)
        },
        //封面上传成功
        OnSuccess1(response, file, fileList){
            this.filelist1 = fileList
        },
        //视频上传成功
        OnSuccess2(response, file, fileList){
            this.filelist2 = fileList
        },
        //封面上传之前
        BeforeUpload1(file){
            var _this = this
            return new Promise((resolve, reject) => {
                VideoPlayApi.SubmitUpload().then(res => {
                    if(res.data.code == 200){
                        var u = uuidv4()
                        var list = {
                            // key表示上传到Bucket内的Object的完整路径，例如exampledir/exampleobject.txtObject，完整路径中不能包含Bucket名称。
                            // filename表示待上传的本地文件名称。
                            'key' : res.data.data.dir + u + file.name,
                            'policy': res.data.data.policy,
                            'OSSAccessKeyId': res.data.data.accessId,
                            // 设置服务端返回状态码为200，不设置则默认返回状态码204。
                            'success_action_status' : '200',    
                            'signature': res.data.data.signature,
                        }
                        _this.dataObj = list
                        _this.form.cover = "https://lihouhang.oss-cn-beijing.aliyuncs.com/" + res.data.data.dir + u + file.name
                        resolve(true)
                    }
                })
            })
            
        },
        //视频上传之前
        BeforeUpload2(file){
            var _this = this
            return new Promise((resolve, reject) => {
                VideoPlayApi.SubmitUpload().then(res => {
                    if(res.data.code == 200){
                        var u = uuidv4()
                        var list = {
                            // key表示上传到Bucket内的Object的完整路径，例如exampledir/exampleobject.txtObject，完整路径中不能包含Bucket名称。
                            // filename表示待上传的本地文件名称。
                            'key' : res.data.data.dir + u +file.name,
                            'policy': res.data.data.policy,
                            'OSSAccessKeyId': res.data.data.accessId,
                            // 设置服务端返回状态码为200，不设置则默认返回状态码204。
                            'success_action_status' : '200',    
                            'signature': res.data.data.signature,
                        }
                        _this.dataObj = list
                        _this.form.resource = "https://lihouhang.oss-cn-beijing.aliyuncs.com/" + res.data.data.dir + u +file.name
                        resolve(true)
                    }
                })
            })
            
        },
        //空方法
        load(){},
        //上传文件
        httprequest(){},
        //点击提交
        Submit(){
            var _this = this
            var list = {
                title:_this.form.name,
                introduction:_this.form.introduction,
                cover:_this.form.cover,
                resource:_this.form.resource,
                classification:_this.form.classification,
                publisherId:sessionStorage.getItem("id")
            }
            //提交表单
            VideoPlayApi.SubmitFileUpload(list).then(res=>{
                if(res.data.code == 200){
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.$router.push('/person')
                }else{
                    this.$message.error('上传失败,请输入正确的数据');
                }
            })
        },
    },
    created(){
        var _this = this
        //获取全部分类
        VideoPlayApi.SubmitAllClassification().then(res=>{
            _this.classification = res.data.data
        })
    }
};
</script>

<style scoped>
.contribute{
    text-align: left;
    padding: 15px;
}
.header{
    font-size: 200%;
    display: inline-block;
}
.input{
    width: 500px;
}
</style>